<template>
  <el-breadcrumb>
    <el-breadcrumb-item>人员管理</el-breadcrumb-item>
    <el-breadcrumb-item>监督员人员管理列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-form :inline="true" :model="queryForm" size="large" style="margin-top: 20px" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="queryForm.realName" placeholder="请输入姓名" style="width: 120px" />
    </el-form-item>
    <el-form-item label="电话">
      <el-input v-model="queryForm.telId" placeholder="请输入手机号" style="width: 150px" />
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="queryForm.sex" placeholder="请选择性别" style="width: 100px">
        <el-option label="全部" :value="''" />
        <el-option label="男" :value="1" />
        <el-option label="女" :value="0" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="clear">清空</el-button>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table
      :data="pageResponseDto.list"
      style="width: 100%;"
      :cell-style="{ padding: '8px' }"
      empty-text="无数据"
      stripe
      border
  >
    <el-table-column
        prop="telId"
        label="手机号"
        width="250"
        align="center"
        header-align="center"
    />

    <el-table-column
        prop="realName"
        label="姓名"
        width="200"
        align="center"
        header-align="center"
    />

    <el-table-column
        prop="birthday"
        label="生日"
        width="200"
        align="center"
        header-align="center"
    />

    <el-table-column
        prop="sex"
        label="性别"
        width="150"
        align="center"
        header-align="center"
    >
      <template #default="scope">
        <el-tag
            :type="scope.row.sex === 1 ? 'primary' : 'danger'"
            size="small"
        >
          {{ scope.row.sex === 1 ? '男' : scope.row.sex === 0 ? '女' : '' }}
        </el-tag>
      </template>
    </el-table-column>

    <el-table-column
        prop="remarks"
        label="备注"
        min-width="200"
        header-align="center"
        align="center"
        show-overflow-tooltip
    />

    <el-table-column
        label="操作"
        width="180"
        fixed="right"
        align="center"
        header-align="center"
    >
      <template #default="scope">
        <el-button
            type="primary"
            size="small"
            @click="editEvent(scope.row)"
            plain
        >
          修改
        </el-button>
        <el-button
            type="danger"
            size="small"
            @click="deleteEvent(scope.row)"
            plain
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="pagination">
    <el-pagination
        background
        small
        layout="prev, pager, next, total"
        :total="pageResponseDto.totalRow"
        :page-size="store.state.maxPageNum"
        style="margin-top: 20px"
        v-model:current-page="pageNum"
    />
  </div>
</template>

<script setup>
import { reactive, ref, inject, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";

const store = useStore();
const router = useRouter();
const axios = inject("axios");

// 查询表单
const queryForm = reactive({
  realName: "",
  telId: "",
  sex: "",
});

// 分页数据
const pageNum = ref(1);
const pageResponseDto = ref({ list: [], totalRow: 0 });

// 分页监听
watch(pageNum, (newValue) => {
  listSupervisorPage(newValue);
});

// 查询列表函数
const listSupervisorPage = (pageNum) => {
  const param = {
    realName: queryForm.realName,
    telId: queryForm.telId,
    sex: queryForm.sex,
    pageNum: pageNum,
    maxPageNum: store.state.maxPageNum || 10,
    beginNum: (pageNum - 1) * (store.state.maxPageNum || 10)
  };

  // 清理空参数
  Object.keys(param).forEach(key => {
    if (param[key] === '' || param[key] === undefined) {
      delete param[key];
    }
  });

  axios.post("/supervisor/getSupervisorList", param)
      .then((res) => {
        pageResponseDto.value = {
          list: res.data?.list || res.data?.supervisorList || [],
          totalRow: res.data?.totalRow || 0
        };
      })
      .catch(error => {
        console.error("获取监督员列表失败:", error);
        pageResponseDto.value = { list: [], totalRow: 0 };
      });
};

// 初始化加载
listSupervisorPage(1);

// 清空查询条件
const clear = () => {
  queryForm.realName = "";
  queryForm.telId = "";
  queryForm.sex = "";
  pageNum.value = 1;
  listSupervisorPage(1);
};

// 查询
const query = () => {
  pageNum.value = 1;
  listSupervisorPage(1);
};

// 编辑事件 - 保持不变，已经使用query传递telId
// 编辑事件 - 传递整个 row 对象
const editEvent = (row) => {
  router.push({
    path: '/index/SupervisorInfo',
    query: {
      telId: row.telId,
      realName: row.realName,
      birthday: row.birthday,
      sex: row.sex,
      remarks: row.remarks
    }
  });
};

// 删除事件
const deleteEvent = (row) => {
  ElMessageBox.confirm(`确定要删除 ${row.realName} 吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        axios.post("/supervisor/deleteSupervisor", null, {
          params: { telId: row.telId } // 关键修改：使用 params
        })
            .then((res) => {
              if (res.data === 1) {
                ElMessage.success("删除成功");
                // 如果当前页数据已空且不是第一页，返回上一页
                if (pageResponseDto.value.list.length === 1 && pageNum.value > 1) {
                  pageNum.value--;
                }
                listSupervisorPage(pageNum.value);
              } else {
                ElMessage.error("删除失败");
              }
            })
            .catch(error => {
              console.error("删除失败:", error);
              ElMessage.error("删除失败: " + error.message);
            });
      })
      .catch(() => {
        ElMessage.info("已取消删除");
      });
};
</script>

<style scoped>
/* 表单样式优化 */
.demo-form-inline {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* 输入框样式 */
.el-input {
  --el-input-border-radius: 4px;
  --el-input-bg-color: #fff;
  --el-input-border-color: #dcdfe6;
  --el-input-hover-border-color: #c0c4cc;
  --el-input-focus-border-color: #409eff;
}

.el-input__wrapper {
  box-shadow: 0 0 0 1px var(--el-input-border-color) !important;
}

.el-input__wrapper:hover {
  box-shadow: 0 0 0 1px var(--el-input-hover-border-color) !important;
}

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--el-input-focus-border-color) !important;
}

/* 选择框样式 */
.el-select {
  --el-select-border-radius: 4px;
}

/* 按钮样式优化 */
.el-button {
  --el-button-border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.el-button--primary {
  --el-button-bg-color: #409eff;
  --el-button-hover-bg-color: #66b1ff;
  --el-button-active-bg-color: #3a8ee6;
}

.el-button--danger {
  --el-button-bg-color: #f56c6c;
  --el-button-hover-bg-color: #f78989;
  --el-button-active-bg-color: #dd6161;
}

.el-button--primary:not(.is-plain),
.el-button--danger:not(.is-plain) {
  color: #fff;
}

/* 操作按钮样式 */
.el-table :deep(.el-button) {
  margin: 0 4px;
  padding: 6px 12px;
  min-height: 32px;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 表格整体样式 */
.el-table {
  margin-top: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

/* 表头样式 */
.el-table :deep(.el-table__header th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
  height: 48px;
}

/* 表格单元格内边距 */
.el-table :deep(.el-table__cell) {
  padding: 12px 0;
}

/* 表格行悬停效果 */
.el-table :deep(.el-table__body tr:hover>td) {
  background-color: #f5f7fa !important;
}
</style>